<template>
  <!--    大学-->
  <div style="width: 100%;display: flex;justify-content: center">
    <div v-if="visible" style="width: 100%;display: flex;justify-content: center">
      <div class="big" v-if="uType=='university'">
        <div  class="base">
          <el-divider style="width: 95%;" content-position="left">
            <h3>基本信息</h3>
          </el-divider>
          <el-button
              v-if="!isEdit"
              @click="toEdit"
              style="height: 30px;border-radius: 30%"
              size="mini"
          >编辑</el-button>
          <el-button
              @click="editSubmit"
              v-if="isEdit"
              style="height: 30px;border-radius: 30%"
              size="mini">
            保存
          </el-button>
          <el-button
              v-if="isEdit"
              @click="isEdit=false"
              style="height: 30px;border-radius: 30%"
              size="mini">
            取消
          </el-button>
        </div>
        <div class="baseMsg">
          <div class="options">
            <p>高校名</p>
            <p>学校层次</p>
            <p>学校性质</p>
            <p>法人</p>
            <p>所在地</p>
            <p>注册时间</p>
          </div>
          <div class="msg">
            <p>{{university.universityName}}</p>
            <p>{{university.level}}</p>
            <p>{{university.nature}}</p>
            <p v-if="!isEdit">{{university.legalPerson}}</p><el-input v-model="universityForm.legalPerson" size="mini" v-else></el-input>
            <p>{{university.address}}</p>
            <p>{{university.registerTime|formatDate}}</p>
          </div>
        </div>
        <div class="contact">
          <el-divider style="width: 95%;" content-position="left">
            <h3>联系信息</h3>
          </el-divider>
        </div>
        <div class="contactMsg">
          <div class="options">
            <p>邮箱</p>

          </div>
          <div class="msg">
            <p v-if="!isEdit">{{university.email}}</p><el-input size="mini" v-model="universityForm.email" v-else></el-input>
          </div>
        </div>
      </div>

      <!--    企业-->
      <div class="big" v-else-if="uType=='company'">
        <div  class="base">
          <el-divider style="width: 95%;" content-position="left">
            <h3>基本信息</h3>
          </el-divider>
          <el-button
              v-if="!isEdit"
              @click="toEdit"
              style="height: 30px;border-radius: 30%"
              size="mini"
          >编辑</el-button>
          <el-button
              @click="editSubmit"
              v-if="isEdit"
              style="height: 30px;border-radius: 30%"
              size="mini">
            保存
          </el-button>
          <el-button
              v-if="isEdit"
              @click="isEdit=false"
              style="height: 30px;border-radius: 30%"
              size="mini">
            取消
          </el-button>
        </div>
        <div class="baseMsg">
          <div class="options">
            <p>企业名</p>
            <p>企业法人</p>
            <p>企业地址</p>
            <p>注册时间</p>
          </div>
          <div class="msg">
            <p>{{company.companyName}}</p>
            <p v-if="!isEdit">{{company.legalPerson}}</p><el-input v-model="companyForm.legalPerson" size="mini" v-else></el-input>
            <p>{{company.address}}</p>
            <p>{{company.registerTime|formatDate}}</p>
          </div>
        </div>
        <div class="contact">
          <el-divider style="width: 95%;" content-position="left">
            <h3>联系信息</h3>
          </el-divider>
        </div>
        <div class="contactMsg">
          <div class="options">
            <p>邮箱</p>
          </div>
          <div class="msg">
            <p v-if="!isEdit">{{company.email||'未填写'}}</p><el-input v-model="companyForm.email" size="mini" v-else></el-input>
          </div>
        </div>
      </div>

      <!--    学生-->
      <div class="big" v-else>
        <div  class="base">
          <el-divider style="width: 95%;" content-position="left">
            <h3>基本信息</h3>
          </el-divider>
          <el-button
              v-if="!isEdit"
              @click="toEdit"
              style="height: 30px;border-radius: 30%"
              size="mini"
          >编辑</el-button>
          <el-button
              v-if="isEdit"
              @click="editSubmit"
              style="height: 30px;border-radius: 30%"
              size="mini">
            保存
          </el-button>
          <el-button
              v-if="isEdit"
              @click="isEdit=false"
              style="height: 30px;border-radius: 30%"
              size="mini">
            取消
          </el-button>
        </div>
        <div class="baseMsg">
          <div class="options">
            <p>用户名</p>
            <p>年龄</p>
            <p>性别</p>
            <p>身份证</p>
            <p>毕业年份</p>
            <p>地址</p>
          </div>
          <div class="msg">
            <p>{{student.studentName}}</p>
            <p v-if="!isEdit">{{student.age}}</p><el-input v-model="studentForm.age" size="mini" v-else></el-input>
            <p v-if="!isEdit">{{student.sex}}</p>
            <el-select v-else size="mini" v-model="studentForm.sex" placeholder="请选择">
              <el-option :value="'男'">男</el-option>
              <el-option :value="'女'">女</el-option>
            </el-select>
            <p>{{student.idCard.replace(/^(\d{6})\d+(\d{4})$/, "$1******$2")}}</p>
            <p>{{student.yearNum}}</p>
            <p>{{student.address||"未填写"}}</p>
          </div>
        </div>
        <div class="contact">
          <el-divider style="width: 95%;" content-position="left">
            <h3>联系信息</h3>
          </el-divider>
        </div>
        <div class="contactMsg">
          <div class="options">
            <p>邮箱</p>
            <p>手机</p>

          </div>
          <div class="msg">
            <p v-if="!isEdit">{{student.email||'暂无'}}</p><el-input v-model="studentForm.email" size="mini" v-else></el-input>
            <p v-if="!isEdit">{{student.phone||'暂无'}}</p><el-input v-model="studentForm.phone" size="mini" v-else></el-input>
          </div>
        </div>

      </div>
    </div>
    <div v-else style="width: 70%;height:100px;background-color:#fff;display: flex;justify-content: center;align-items: center;height: 180px">
      <h3>该用户个人信息已隐藏~</h3>
    </div>

  </div>



</template>

<script>
import {getArchives, upCompany, upStudent, upUniversity} from "@/api/user";
import {cloneObj} from "@/untils/untils";
export default {
  name: "archives",
  data() {
    return {
      isEdit:false,
      idCard:'',
      uType:this.$store.getters["user/getUser"].uType,
      formInline: {
        user: "",
        region: "",
      },
      company:{},
      university:{},
      student:{idCard:''},
      visible:true,
      studentForm:{
        sex:'',
        age:0,
        email:'',
        phone:''
      },
      universityForm:{
        legalPerson:'',
        email:''
      },
      companyForm:{
        legalPerson: '',
        email:'',
        state:1
      }
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      const {uid,uType}=this.$store.getters["user/getUser"]
      getArchives(uType,uid,true).then((res) => {
        console.log(res);
        if(this.uType=='university'){
          this.university=res.data.extend.university
          console.log(this.university)
        }else if(this.uType=='student'){
          this.student=res.data.extend.student
        }else {
          this.company=res.data.extend.company
        }
      });
    },
    toEdit(){
      this.companyForm=cloneObj(this.company)
      this.universityForm=cloneObj(this.university)
      this.studentForm=cloneObj(this.student)
      this.isEdit=true
    },
    editSubmit(){
      let type=this.uType
      if(type=='student'){
        let student=this.studentForm
        upStudent({sid:student.sid,sex:student.sex,age:student.age,email:student.email,phone:student.phone}).then(res=>{
          this.$message.warning(res.data.msg)
          this.isEdit=false
          this.getData()
        })
      }else if(type=='university'){
        let university=this.universityForm
        upUniversity({uid:university.uid,email:university.email,state:university.state,legalPerson:university.legalPerson}).then(res=>{
          this.$message.warning(res.data.msg)
          this.isEdit=false
          this.getData()
        })
      }else {
        let company=this.companyForm
        upCompany({cid:company.cid,email:company.email,legalPerson:company.legalPerson,state:company.state}).then(res=>{
          this.$message.warning(res.data.msg)
          this.isEdit=false
          this.getData()
        })
      }
    },
    onSubmit() {
      console.log("submit!");
    },
  },
};
</script>

<style scoped>
.big{
  width: 70%;
  min-height: 500px;
  box-sizing: border-box;
  padding: 2% 10%;
  display: flex;
  align-items: center;
  flex-direction: column;
  background-color: #fff;
  border-bottom: 1px solid grey;
}
.base {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.contact {
  width: 100%;
}
.baseMsg {
  width: 90%;
  height: 170px;
  font-size: 15px;
  color: rgb(128, 128, 128);
  display: flex;
  justify-content: space-between;
}

.contactMsg {
  width: 90%;
  height: 70px;
  font-size: 15px;
  color: rgb(128, 128, 128);
  display: flex;
  justify-content: space-between;
}
.options {
  width: 60px;
  height: 100%;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: flex-end;
}
.options>p{
  line-height: 30px;
}
.msg {
  color: black;
  justify-content: space-between;
  width: 85%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.msg>p{
  line-height: 30px;
}
</style>
